<!--
 * @Author: Gary 289602025@qq.com
 * @Date: 2024-04-24 23:16:19
 * @LastEditors: Gary 289602025@qq.com
 * @LastEditTime: 2024-04-24 23:16:22
 * @FilePath: \vue3-test\bak\20_shallowRef\Father.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <button @click="clickFun">点击</button>{{ state.count }}
    <br />
    <button @click="clickFunShallow">点击</button>{{ shallowState.count }}
    <button @click="updateShallowData">修改</button>
  </div>
</template>

<script setup lang="ts">
  import { ref, shallowRef } from 'vue'

  let state = ref({
    count: 1
  })

  function clickFun() {
    state.value.count++
  }
  // ref() 的浅层作用形式。
  let shallowState = shallowRef({
    count: 1
  })
  // 不会触发更改
  function clickFunShallow() {
    shallowState.value.count++
  }
  // 触发更改
  function updateShallowData() {
    shallowState.value = {
      count: 100
    }
  }
</script>

<style>
</style>